<template>
  <div class="question">
    <div class="Header">
      <img src="../../assets/image/goBack.png" @click="goBack"/>
      <p>我的问答</p>
    </div>
    <div class="questionNav">
      <div class="questionNavLeft" @click="showQuestion">
        <p :class="{isBlack1:isBlack1,isRed1:isRed1}">我的提问</p>
        <div :class="{navLine:isShow1}"></div>
      </div>
      <div class="vLine"></div>
      <div class="questionNavRight" @click="showAnswer">
        <p :class="{isBlack2:isBlack2,isRed2:isRed2}">我的回答</p>
        <div :class="{navLine:isShow2}"></div>
      </div>
    </div>
    <div v-if="allData==''||allData==[]" class="noQuestion">
      <img src="../../assets/image/question/noQuestion.png" alt="">
      <p>暂无回答~</p>
    </div>
    <div class="questionBox" v-show="allData">
      <scroller class='myScroller' :on-infinite="infinite"  ref="myScroller" :on-refresh="refresh">
        <ul>
          <li   v-for="item in allData" @click="goQuestionDetail(item.SERVDETAILQA_ID)">
            <img class="hasAnswer" src="../../assets/image/question/hasAnswer.png" v-show="item.IS_ANSWER_STATUS">
            <div class="imgBox">
              <img :src="item.SERV_DETAIL_PHOTO" alt="">
            </div>
            <div class="questionContent">
              <p class="title">{{item.SERV_DETAIL_NAME}}</p>
              <p class="con"><img src="../../assets/image/question/question.png" alt=""><span>{{item.MESSAGE}}</span></p>
              <p class="num">
                <span class="numLeft">共{{item.SERVDETAILQA_COUNT}}条回答</span>
                <span class="numRight">{{item.MESSAGE_TIME|filterTime5}}</span>
              </p>
            </div>
          </li>
        </ul>
      <div class="footer" v-if="!hasMore">&#45;&#45;没有更多了哟&#45;&#45;</div>
      </scroller>
     
    </div>

  </div>
</template>
<script>
  /*智能保养*/
  import {XHeader} from 'vux';
  import { setCookie, getCookie } from '../../util/commonUtils';
  export default {
    name:"",
    // 数据
    data(){

      return{
        userId: '',
        isRed1: true, //是否红色
        isRed2: false, //是否红色
        isBlack1: false, //是否黑色
        isBlack2: true, //是否黑色
        isShow1: true, //是否显示
        isShow2: false, //是否显示
        isQuestion:true,//显示提问or回答
        questionList:'',//显示的提问
        answerList:'',//显示的回答
        allQuestion:'',//提问列表
        allAnswer:'',//回答列表
        page:1,// 页数
        flag:false,
        allData:'',//所有的数据
        type:1, //显示的提问or回答
        showdisc:false,
        hasMore:true,
      }
    },
    // 计算属性
    computed:{

    },
    // 创建（实例创建完成）
    created(){
      this.userId=getCookie('loginkey');
      this.allDatas();
      this.$vux.loading.show({
        text: ''
      });

    },
    // el被创建，并挂载到实例上
    mounted(){

    },
    // 方法（实例中的方法）-----------
    methods:{
      allDatas(){
        
          if(this.type==1){
            let obj = {};
            obj.USER_ID =this.userId;
            obj.PAGE_NO = this.page;
            obj.PAGE_SIZE = 6;
          //  console.log(obj)

              this.$fetchPost('serviceDetailQA/getUserServiceDetailQuestionList',obj).then(res => {

                if(res.STATUS_CODE == 1) {

                   this.$vux.loading.hide();
                if(res.QUESTION_LIST.length==0){
                  
                  this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成
                  this.hasMore=false; //显示没有更多
                  return;
                }
                if(this.page>1){
                  // console.log(this.$refs.myScroller)
                  this.allData = this.allData.concat(res.QUESTION_LIST);
                  this.page++;
                  this.$refs.myScroller.finishInfinite();//通知scroller数据加载完成
                }else{
                  console.log(this.$refs.myScroller)
                  this.allData = res.QUESTION_LIST;
                  this.page++;
                 //console.log(this.allData)
                  this.$refs.myScroller.finishInfinite();//通知scroller数据加载完成
                }
              }
            }, err => console.log(err));
          }else{
              this.$fetchPost('serviceDetailQA/getUserServiceDetailAnswerList',{USER_ID:this.userId}).then(res=>{

                if(res.STATUS_CODE==1){
                  this.$vux.loading.hide();
                  this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成
           
                  this.allData=res.ANSWER_LIST
                 // console.log(this.allData)
                }
              },err=>{
                console.log(err)
            })
          }

      },

      goQuestionDetail(id){
        this.$router.push('/questionDetail/'+id);
      },
      goBack(){
        this.$router.back(-1)
      },
      showQuestion(){
        this.$vux.loading.show({
          text: ''
        });
        this.isShow1 = true;
        this.isShow2 = false;
        this.isRed1 = true;
        this.isBlack1 = false;
        this.isRed2 = false;
        this.isBlack2 = true;
        this.isQuestion=true;
        this.page=1;
        this.type=1;
        this.allDatas();

      },
      showAnswer(){
        this.$vux.loading.show({
          text: ''
        });
        this.isShow1 = false;
        this.isShow2 = true;
        this.isRed1 = false;
        this.isBlack1 = true;
        this.isRed2 = true;
        this.isBlack2 = false;
        this.isQuestion=false;
        this.type=2;
        this.page=1;
        this.allDatas();
      },

      infinite() {

        // setTimeout(()=>this.allDatas(),500);

          this.allDatas();

      },
      refresh(){
        let obj = {};
        if(this.page<=1){
          this.$refs.myScroller.finishPullToRefresh();
          return;
        }


        obj.USER_ID =this.userId;
        obj.PAGE_NO = 1;
        obj.PAGE_SIZE = 6;
        //console.log(obj)
          this.$fetchPost('serviceDetailQA/getUserServiceDetailQuestionList',obj).then(res => {
            if(res.STATUS_CODE == 1) {
         // console.log(res)

            let len1=res.QUESTION_LIST.length;
         //  console.log(len1)

            let len2=this.unquie(res.QUESTION_LIST,this.allData).length;

            if(len2>len1){
              this.allData=this.unquie(res.QUESTION_LIST,this.allData);

            }else{

              this.showdisc=true;

            }
            this.$refs.myScroller.finishPullToRefresh();
          }
        }, err => console.log(err));
      },
      unquie(arr1, arr2){

        let tmp =arr1.concat(arr2)
        let result = [], hash = {};
        for (var i = 0; i<tmp.length; i++) {
            var elem = tmp[i].SERVDETAIL_ID; 
       
            if (!hash[elem]) {
               
                result.push(tmp[i]);
                
                hash[elem] = true;
            }
        }
        return result;
       //  console.log(arr1);
       //  console.log(arr2);
    
       //  for (var i = 0 ; i < arr1.length ; i ++ ){
       //    for(var j = 0 ; j < arr2.length ; j ++ ){

       //     if (arr1[i].SERVDETAILQA_ID == arr2[j].SERVDETAILQA_ID){
       //      console.log(1)
       //       arr1.splice(i,1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
       //     }
       //    }
       //  }

       // for(var i = arr2.length-1; i <=0; i--){
       //   arr1.unshift(arr2[i]);
       // }
       //  return arr1.concat(arr2);
      },
//      refresh(){
//        let obj = {};
//        obj.USER_ID =this.userId;
//        obj.PAGE_NO = this.page;
//        obj.PAGE_SIZE = 4;
//        this.$fetchPost('serviceDetailQA/getUserServiceDetailQuestionList',obj).then(res => {
//          if(res.STATUS_CODE == 1){
//           this.questionList=res.QUESTION_LIST;
//           this.$refs.myScroller.finishPullToRefresh();
//          }
//
//        }, err => console.log(err));
//      },
    },
    // 子组件
    components:{
      XHeader
    }
  }
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
  .vux-header{
    border-bottom:1px solid #fefefe;
  }
  .question{
    height:100%;
    width: 7.5rem;
    overflow: hidden;
    background: #fff;
    .Header{
      position: fixed;
      z-index: 8;
      width: 100%;
      height:0.8rem;
      line-height:0.8rem;
      font-size:0.33rem;
      background: #fff;
      color:#222222;
      img{
        position: absolute;
        left: 0.22rem;
        bottom: 0.25rem;
        height: 0.38rem;
      }
    }
    .myScroller{
      padding-top:1.6rem;
    }
    .questionNav{
      position: fixed;
      top:0.8rem;
      width: 100%;
      z-index: 8;
      height: 0.8rem;
      background: #ffffff;
      border-bottom: 0.01rem solid #dddddd;
      display: flex;
      .questionNavLeft{
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        position: relative;
        p{
          font-size: 0.3rem;
          align-self: center;
        }
        .navLine {
          position: absolute;
          bottom: 0;
          left: 1.2rem;
          width: 1.3rem;
          height:0.04rem;
          background:#ec383f;
        }
        .isBlack1 {
          color: #333;
        }
        .isRed1 {
          color: #ec383f;
        }
      }
      .questionNavRight{
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        position: relative;
        p{
          font-size: 0.3rem;
          align-self: center;
        }
        .navLine {
          position: absolute;
          bottom: 0;
          left: 1.2rem;
          width: 1.3rem;
          height:0.04rem;
          background:#ec383f;
        }
        .isBlack1 {
          color: #333;
        }
        .isRed1 {
          color: #ec383f;
        }
      }

    }
  }
  .noQuestion{
    position: absolute;
    width: 100%;
    padding-top:1.6rem;

    font-size:0.29rem;
    color:#999999;
    img{
      position: absolute;
      top: 4.8rem;
      left: 50%;
      margin-left: -0.85rem;
      width: 1.7rem;
    }
    p{

      position: absolute;
      top:6rem;
      width: 100%;
    }
  }
  .questionBox{

    height:100%;
    .footer{
      // position: absolute;
      // bottom: 0;
      // left: 0;
      width: 100%;
      height:1rem;
      line-height:1rem;
      font-size:0.22rem;
      color:#666666;
      background: #fff;

    }
    ul{
      background:#f5f5f5;
      li{
        position: relative;
        width: 100%;

        border-bottom: 0.2rem solid #f5f5f5;
        background: #ffffff;
        overflow:hidden;
        .hasAnswer{
          position: absolute;
          width: 2rem;
          top: -0.4rem;
          right: 0.4rem;
        }
        .imgBox{
          position: absolute;
          left: 0.4rem;
          top: 0.4rem;
          width: 1.5rem;
          height: 1.5rem;
          img{
            width: 90%;
          }
        }
        .questionContent{
          padding-left:2.14rem;
          padding-top: 0.46rem;
          padding-bottom: 0.2rem;
          text-align:left;
          .title{
          
             font-size: 0.29rem;
             height: 0.31rem;
            line-height: 0.34rem;;
              width: 4.2rem;
            overflow: hidden;
             color: #222222;
             margin-bottom: 0.23rem;
           }
          .con{

            font-size: 0.25rem;
            height: 0.33rem;
            width: 4.2rem;
            /*overflow: hidden;*/
            color: #666666;
            margin-bottom:0.3rem;
            line-height:0.25rem;

            img{

              height:0.33rem;
              width:0.34rem;
              vertical-align: middle;
              margin-right: 0.1rem;
              float: left;
            }
            span{
              overflow: hidden;
              display: block;
              height: 0.25rem;
              line-height: 0.25rem;
              font-size: 0.25rem;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .num{
            color: #999999;
            font-size: 0.24rem;
            margin-bottom:0.05rem;
            overflow:hidden;
            .numRight{
              float:right;
              margin-right: 0.30rem;
            }
            .numLeft{
              float:left
            }
          }
        }

      }
    }
  }


  /*.question .questionNav p{*/

    /*font-size: 0.3rem;*/
    /*align-self: center;*/
  /*}*/
</style>
